require('../../assets/css/index.less');
require("../../assets/fitness-font/iconfont.css");
require('./myinfo.less');

// 引入axios
const axios = require('../../utils/axios.js');


// 引入window
const { $, g } = require('../../utils/dom')

// 引入weui
require('weui') //样式
const weui = require('weui.js'); //js

/**
 * 文档加载
 */
$(function () {
    /**
     * 回到上一个记录
     */
    g('#backbtn').addEventListener('click', () => {
        location.href = './my.html'
    })

    /**
     * 头像上传
     */
    g('#portraitbox').addEventListener('click', () => {
        g('#file').click();
    })

    /**
     * 选择图片
     */
    g('#file').addEventListener('change', function () {
        // 创建formDtae对象
        const fd = new FormData();
        fd.append('file', this.files[0])

        axios.post('/api/circles/uploadImg', fd).then((res) => {
            if (res.data.errno === 0) {
                g('.portrait').src = 'http://fitness.h5.itsource.cn:3701' + res.data.data.url
            }
        })
    })

    /**
     * 性别
     */
    g('#genderBox').addEventListener('click', function () {
        weui.picker([{
            label: '女',
            value: 0
        }, {
            label: '男',
            value: 1
        }], {
            onConfirm: function (r) {
                g('#gender').textContent = r[0].label;
            },
            title: '性别选择'
        });
    });

    // 生日
    g('#birthdayBox').addEventListener('click', function () {
        weui.datePicker({
            start: 1990, //起始时间
            end: new Date().getFullYear(),//结束时间，当前时间结束年份
            onConfirm: function (r) {
                g('#birthday').textContent = r.map(v => {
                    return v.value < 10 ? '0' + v.value : v.value
                }).join('-')
            },
            title: '选择出生日期'
        });
    });

    // 省份
    let pid = 0;
    g('#provinceBox').addEventListener('click', () => {
        axios.get('api/shared/province').then((res) => {
            let arr = res.data.data.map(function (v) {
                return {
                    label: v.name,
                    value: v.id
                }
            })
            //（同步异步问题）
            weui.picker(arr, {
                onConfirm: function (r) {
                    g('#province').textContent = r[0].label;
                    pid = r[0].value;
                    g('#city').textContent = '请选择';
                },
                title: '省份选择'
            });
        });
    })

    // 城市
    let cityid = 0;
    g('#cityBox').addEventListener('click', function () {
        axios.get('/api/shared/city', {
            params: {
                provinceId: pid
            }
        }).then((res) => {
            if (res.data.errno === 0) {
                let arr = res.data.data.map(function (v) {
                    return {
                        label: v.name,
                        value: v.id
                    }
                })

                weui.picker(arr, {
                    onConfirm: function (r) {
                        g('#city').textContent = r[0].label;
                        cityid = r[0].value;
                    },
                    title: '城市选择'
                });
            }
        })
    });

    // 个人介绍
    g('#desc').addEventListener('input', function () {
        g('#desclen').textContent = this.value.length;
    })

    // 保存数据
    g('#saveBtn').addEventListener('click', function () {


        // 参数对象
        const params = {
            nickName: g('#nickname').value,
            gender: g('#gender').textContent === '男' ? 1 : 0,
            provinceId: pid,
            cityId: cityid,
            birthday: g('#birthday').textContent,
            imgUrl: g('.portrait').src,
            sign: g('#desc').value,
        }

        axios.post('/api/user/changeInfo', params).then((res) => {
            if (res.data.errno === 0) {
                localStorage.setItem('token', res.data.data.token)
                location.href = './my.html';
            }
        })
    })

    // 数据回填
    axios.get('/api/user/info').then((res) => {
        if (res.data.errno === 0) {
            let data = res.data.data;
            g('.portrait').src = data.imgUrl;
            g('#desc').textContent = data.sign;
            g('#nickname').value = data.nickName;
            g('#gender').textContent = data.gender === 1 ? '男' : '女';
            g('#birthday').textContent = data.birthday;
            // g('#descNum').textContent = g('#desc').value.length;

            // g('#province').textContent = data.provinceId;
            // g('city').textContent = data.cityId;


            axios.get('api/shared/province').then(function (res) {
                let obj = res.data.data.filter(function (v) {
                    return v.id === data.provinceId
                })
                g('#province').textContent = obj[0].name;

            })


            // 更具值获取城市名
            axios.get('api/shared/city', {
                params: {
                    provinceId: data.provinceId
                }
            }).then(function (res) {
                let arr = res.data.data.filter(function (v) {
                    return v.id === data.cityId
                })
                g('#city').textContent = arr[0].name;

            })
        }
    })
})